/*********************
* 下拉框选择树
* xuqiang
* 2016-11-25
***********************/
Ext.namespace("Ext.com.bkfm");
Ext.define('Ext.com.bkfm.comboboxtree',{
	extend : 'Ext.form.field.Picker',
	xtype : 'tree',
	editable: false,
	rootVisible: true,//是否展示根目录
	treeConfigId: "",//树配置id序号
	rootId: '-1',//根目录id,默认为-1
	rootText: '根节点',//根目录名称
	uses : [ 'Ext.tree.Panel' ],
	triggerCls : Ext.baseCSSPrefix + 'form-arrow-trigger',
	config : {
		/**
		 * @cfg {Ext.data.TreeStore} store A tree store that the
		 *      tree picker will be bound to
		 */
		//store : null,

		/**
		 * @cfg {String} displayField The field inside the model
		 *      that will be used as the node's text. Defaults
		 *      to the default value of {@link Ext.tree.Panel}'s
		 *      `displayField` configuration.
		 */
		displayField : 'text',

		/**
		 * @cfg {Array} columns An optional array of columns for
		 *      multi-column trees
		 */
		columns : null,

		/**
		 * @cfg {Boolean} selectOnTab Whether the Tab key should
		 *      select the currently highlighted item. Defaults
		 *      to `true`.
		 */
		selectOnTab : true,

		/**
		 * @cfg {Number} maxPickerHeight The maximum height of
		 *      the tree dropdown. Defaults to 300.
		 */
		maxPickerHeight : 200,

		/**
		 * @cfg {Number} minPickerHeight The minimum height of
		 *      the tree dropdown. Defaults to 100.
		 */
		minPickerHeight : 200
	},

	editable : false,

	initComponent : function() {
		var me = this;
        Ext.apply(this, {
            fieldLabel: me.fieldLabel,
            labelWidth: me.labelWidth
        });
		if(Ext.isEmpty(this.treeConfigId)){
			Ext.Msg.alert('系统提示','无效的“treeConfigId”参数');
			Console.log("无效的“treeConfigId”参数");
		}
		if(Ext.isEmpty(this.rootText)){
			this.rootText = "根节点";
		}
		me.addEvents(
				/**
				 * @event select Fires when a tree node is selected
				 * @param {Ext.ux.TreePicker}
				 *            picker This tree picker
				 * @param {Ext.data.Model}
				 *            record The selected record
				 */
				'select');
		me.createStore();
				/*me.mon(me.store, {
					scope : me,
					load : me.onLoad,
					update : me.onUpdate
				});*/
		me.callParent(arguments);


	},
	createStore: function(){
		var self = this;
		if(Ext.isEmpty)
		var store = Ext.create('Ext.data.TreeStore',{
							root : {
								id : self.rootId,// 默认根目录id为-1，也可以自定义
								text : self.rootText,// 默认根目录名称，也可以自定义
								expanded : false
							},
							proxy : {
								type : 'ajax',
								url : CONTEXT.contextPath+ "/bkfm/metadata/v1/gettree",
								reader : {
									type : 'json',
									root : 'list'// 数据
								},
								extraParams : {
									treeConfigId : self.treeConfigId
								}
							},
							listeners : {
								'beforeexpand' : function(
										store, node, eOpts) {
									// 点击父亲节点的菜单会将节点的id通过ajax请求，将到后台
									this.proxy.extraParams.parentId = store.get("id")|| self.rootId;
								}
							}
						});
		this.store = store;
	},
	/**
	 * Creates and returns the tree panel to be used as this
	 * field's picker.
	 */
	createPicker : function() {
		var me = this;
		picker = new Ext.tree.Panel({
			shrinkWrapDock : 2,
			store : me.store,
			floating : true,
			displayField : me.displayField,
			columns : me.columns,
			minHeight : me.minPickerHeight,
			maxHeight : me.maxPickerHeight,
			manageHeight : false,
			shadow : false,
			listeners : {
				scope : me,
				itemclick : me.onItemClick
			},
			viewConfig : {
				listeners : {
					scope : me,
					render : me.onViewRender
				}
			}
		}), view = picker.getView();

		if (Ext.isIE9 && Ext.isStrict) {
			// In IE9 strict mode, the tree view grows by the
			// height of the horizontal scroll bar when the
			// items are highlighted or unhighlighted.
			// Also when items are collapsed or expanded the
			// height of the view is off. Forcing a repaint
			// fixes the problem.
			view.on({
				scope : me,
				highlightitem : me.repaintPickerView,
				unhighlightitem : me.repaintPickerView,
				afteritemexpand : me.repaintPickerView,
				afteritemcollapse : me.repaintPickerView
			});
		}
		return picker;
	},

	onViewRender : function(view) {
		view.getEl()
				.on('keypress', this.onPickerKeypress, this);
	},

	/**
	 * repaints the tree view
	 */
	repaintPickerView : function() {
		var style = this.picker.getView().getEl().dom.style;

		// can't use Element.repaint because it contains a
		// setTimeout, which results in a flicker effect
		style.display = style.display;
	},

	/**
	 * Aligns the picker to the input element
	 */
	alignPicker : function() {
		var me = this, picker;

		if (me.isExpanded) {
			picker = me.getPicker();
			if (me.matchFieldWidth) {
				// Auto the height (it will be constrained by
				// max height)
				picker.setWidth(me.bodyEl.getWidth());
			}
			if (picker.isFloating()) {
				me.doAlign();
			}
		}
	},

	/**
	 * Handles a click even on a tree node
	 *
	 * @private
	 * @param {Ext.tree.View}
	 *            view
	 * @param {Ext.data.Model}
	 *            record
	 * @param {HTMLElement}
	 *            node
	 * @param {Number}
	 *            rowIndex
	 * @param {Ext.EventObject}
	 *            e
	 */
	onItemClick : function(view, record, node, rowIndex, e) {
		this.selectItem(record);
	},

	/**
	 * Handles a keypress event on the picker element
	 *
	 * @private
	 * @param {Ext.EventObject}
	 *            e
	 * @param {HTMLElement}
	 *            el
	 */
	onPickerKeypress : function(e, el) {
		var key = e.getKey();

		if (key === e.ENTER
				|| (key === e.TAB && this.selectOnTab)) {
			this.selectItem(this.picker.getSelectionModel()
					.getSelection()[0]);
		}
	},

	/**
	 * Changes the selection to a given record and closes the
	 * picker
	 *
	 * @private
	 * @param {Ext.data.Model}
	 *            record
	 */
	selectItem : function(record) {
		var me = this;
		me.setValue(record.getId());
		me.picker.hide();
		me.inputEl.focus();
		me.fireEvent('select', me, record)

	},

	/**
	 * Runs when the picker is expanded. Selects the appropriate
	 * tree node based on the value of the input element, and
	 * focuses the picker so that keyboard navigation will work.
	 *
	 * @private
	 */
	onExpand : function() {
		var me = this, picker = me.picker, store = picker.store, value = me.value, node;
		// debugger;

		if (value) {
			node = store.getNodeById(value);
		}

		if (!node) {
			node = store.getRootNode();
		}

		picker.selectPath(node.getPath());

		Ext.defer(function() {
			picker.getView().focus();
		}, 1);
	},

	/**
	 * Sets the specified value into the field
	 *
	 * @param {Mixed}
	 *            value
	 * @return {Ext.ux.TreePicker} this
	 */
	setValue : function(value) {
		var me = this, record;

		me.value = value;
		//alert(me.store.loading);
		if (me.store !=null && me.store.loading) {
			// Called while the Store is loading. Ensure it is
			// processed by the onLoad method.
			return me;
		}
		// debugger;
		// try to find a record in the store that matches the
		// value
		record = value ? me.store.getNodeById(value) : me.store
				.getRootNode();
		if (value === undefined) {
			record = me.store.getRootNode();
			me.value = record.getId();
		} else {
			record = me.store.getNodeById(value);
		}

		// set the raw value to the record's display field if a
		// record was found
		me.setRawValue(record ? record.get(me.displayField)
				: '');

		return me;
	},

	getSubmitValue : function() {
		return this.value;
	},

	/**
	 * Returns the current data value of the field (the
	 * idProperty of the record)
	 *
	 * @return {Number}
	 */
	getValue : function() {
		return this.value;
	},

	/**
	 * Handles the store's load event.
	 *
	 * @private
	 */
	onLoad : function() {
		var value = this.value;

		if (value) {
			this.setValue(value);
		}
	},

	onUpdate : function(store, rec, type, modifiedFieldNames) {
		var display = this.displayField;
		// debugger;
		if (type === 'edit'
				&& modifiedFieldNames
				&& Ext.Array.contains(modifiedFieldNames,
						display) && this.value === rec.getId()) {
			this.setRawValue(rec.get(display));
		}
	}

});